<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    :width="width"
    :before-close="handleClose"
    destroy-on-close
  >
    <slot name="content"></slot>
  </el-dialog>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'

const props = defineProps({
  // 弹窗是否显示
  visible: {
    type: Boolean,
    default: false
  },
  // 弹窗标题
  title: {
    type: String,
    default: '表单'
  },
  // 弹窗宽度
  width: {
    type: String,
    default: '50%'
  }
})

const emit = defineEmits(['update:visible', 'submit', 'close'])

const dialogVisible = ref(false)
const formRef = ref(null)

// 监听visible变化
watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val
    if (val) {
      nextTick(() => {
        formRef.value?.clearValidate()
      })
    }
  }
)

// 监听dialogVisible变化
watch(dialogVisible, (val) => {
  emit('update:visible', val)
})

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}

</script>
